<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item prop="userName">
            <el-input v-model="queryParams.name" placeholder="请输入客户名称" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="客户姓名" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="证件号码" align="center" prop="idNo" :show-overflow-tooltip="true" />
      <el-table-column label="申请金额(元)" align="center" prop="amount" :show-overflow-tooltip="true" />
      <el-table-column label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true" />
      <el-table-column label="类型" align="center" prop="type" />
      <el-table-column label="推送时间" align="center" prop="createTime" />
      <el-table-column label="业务流水号" align="center" prop="businessNo" />
      <el-table-column label="推送时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button link type="primary" icon="View" @click="handleEditTable(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
// import { reactive, ref, nextTick } from "vue";
import { getDueList } from "@/api/guarantee";
import { onMounted } from "vue";
import { ElMessageBox, ElTree } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const formSize = ref("default");
const tableList = ref([]);
const loading = ref(false);
const showSearch = ref(false);
const total = ref(0);
const data = reactive({
  queryParams: {
    page_count: 1,
    page_size: 10,
    tableName: undefined,
    tableComment: undefined,
  },
  preview: {
    open: false,
    title: "添加角色",
    data: {},
    activeName: "domain.java",
  },
});
const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
  id: "", //id
  orgId: "", //orgId
  orgPkId: "", //当前机构ID
  type: "", //类型/ 1- 编辑or 2- 添加
});

const rules = reactive({
  text: [{ required: true, message: "请填写角色描述", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请填写角色名称",
      trigger: "blur",
    },
  ],
});

const { queryParams, preview } = toRefs(data);
onMounted(() => {});

// 添加
function staffAdd() {}

//查询列表
function getList(val) {
  const params = {
    // name: "",
    type: "1",
    // no: "",
    // start: "",
    // end: "",
    name: queryParams.value.name,
    phone: queryParams.value.phone,
    page_size: queryParams.value.page_count,
    page_count: queryParams.value.page_size,
  };
  getDueList(params).then((res) => {
    console.log(res, "6666");
    if (res.code == 200 && res.data.list.length > 0) {
      tableList.value = res.data.list;
      total.value = res.data.total_page;
      tableList.value.forEach((item) => {
        if (item.type == "1") {
          item.type = "个人";
        }
      });
    } else {
      tableList.value = [];
      total.value = "";
    }
  });
}

//查看
function handleEditTable(val) {
  console.log(val, "wwww");
  router.push({ path: "privateDetail", query: { id: val.id } });
}

getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}
:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
